<template>
	<div>
		<!--配送时间-->
		<div class="aui-content">
            <div class="noTime">
               <div class="noTimeLeft">
                    <div class="aui-list-item-label-icon" style="color:#38b035;margin-top:0.3rem;">
                        <i class="icon njfont nj-shijian"></i>
                    </div>
                    <div style="margin-left:0.3rem;font-weight:bold;">
                        送达时间
                    </div>
               </div>
				<!-- @touchend.stop.prevent 解决better-scroll 触发两次点击事件的问题 -->
               <div style="margin-right:0.8rem;color:#EF5423" @click.stop="showPop" >
                   {{chooseFlag?'更改配送时间':'请选择配送时间'}} 
               </div>
               <div class="chooseTimeBoxJiantou"></div>
            </div>
            <div class="packageTime"  v-if="chooseFlag">
                <div v-if="data1 && data1.length">
                    <span style="margin-right:0.3rem;">包裹1</span> 
                    <span style="padding-left:0.1rem">
                        <span> {{allFlag?deliveryDateNomal:deliveryDate}} {{allFlag?showTimeNomal:showTime}}</span>  
                        <span style="padding-left:0.1rem;text-align:center;">{{getNormalM && getNormalM.normalMFlag?'运费' + getNormalM.normalM:'免运费'}}</span>
                    </span>
                </div>  
                <div v-if="data2 && data2.length">
                    <span style="margin-right:0.3rem;">{{allFlag?'包裹2':'包裹1'}}</span> 
                    <span style="padding-left:0.1rem">
                        <span>{{allFlag?deliveryDateBig:deliveryDate}} {{allFlag?showTimeBig:showTime}}</span> 
                        <span style="padding-left:0.1rem;text-align:center;">{{getBigM && getBigM.bigMFlag?'运费' + getBigM.bigM:'免运费'}}</span>
                    </span>
                </div>
            </div>
            
			<ul class="aui-list lightred_bj" v-if="false">
				<li class="aui-list-item" style="border:0">
                    <!-- style="color:#38b035"  -->
					<div class="aui-list-item-label-icon" >
						<i class="icon njfont nj-shijian"></i>
					</div>
					<div class="aui-list-item-inner">
						<div class="aui-list-item-title">送达时间
							<span v-if="deliveryList.length > 0">
                        		<!--<span :class="{[idName]:true}">{{showTime}}</span> &nbsp;&nbsp;-->
							<!--<span v-if="money"> (运费：{{money}})</span>-->
							</span>
						</div>
						<div class="aui-label aui-label-danger aui-label-outlined" @click.stop="showPop" style="margin-left: 0.75rem;" v-if="!chooseFlag">{{'请选择配送时间'}}</div>
					</div>
				</li>
				<li>
					<div class="parcelName" v-if="chooseFlag">
						<div style="width: 70%;text-align: left;padding-left: 0.75rem;">
							<p v-if="data1 && data1.length">包裹1：{{allFlag?deliveryDateNomal:deliveryDate}} {{allFlag?showTimeNomal:showTime}}</p>
							<p v-if="data2 && data2.length">{{allFlag?'包裹2':'包裹1'}}：{{allFlag?deliveryDateBig:deliveryDate}} {{allFlag?showTimeBig:showTime}}</p>
						</div>
						<div class="aui-list-item-right" style="width: 25%;">  <!-- showTitleMsg()-->
							<div class="aui-label aui-label-danger aui-label-outlined" @click.stop="showPop">{{'更改'}}</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!--class="chooseTime"-->
		<!--配送时间 end-->
		<div class="chooseTime">
			<popup v-model="popupVisible" position="bottom" style="width: 100%;" >
				<!--max-height:70vh;-->
				<div id="get_ticket" style="display: flex;flex-direction: column;min-height:60vh;max-height:70vh;" >
	                <div class="timeHeadTitle" ref="testPop">
	                  		  选择送达时间
	                    <div class="close_page m_close_page" @click="cancelPop">
	                        <i></i>
	                        <i></i>
	                        <i></i>
	                    </div>
	                </div>
					<div style="width:100%;height:100%;flex:1;position: relative;" v-if="this.marks">
						<img data-v-05b40818="" src="static/image/homeLoading.gif" style="width: 3rem;position:absolute;top:37%;left:43%;">
					</div>
	                <!--tab切换-->
	                <div style="width: 100%;" v-if="allFlag && !this.marks">
	                	<div style="display: flex;">
	                		<div class="parcel" @click="changeParcel1" :class="{parcelOpen:clickNow===0,parcelClose:clickNow===1}">包裹1</div>
	                		<div class="parcel" @click="changeParcel2" :class="{parcelOpen:clickNow===1,parcelClose:clickNow===0}">包裹2</div>
	                	</div>
	                </div>
	                <!--商品展示-->
	                <!-- <div style="border-bottom: 1px solid #eaeaea;overflow-x:hidden;" v-if="allFlag" @touchstart="stopDefault($event)"> -->
	                <div style="border-bottom: 1px solid #eaeaea;overflow-x:hidden;" v-if="allFlag && !this.marks">
                		<ul class="aui-list aui-media-list" style="overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-y: hidden;">
			                <!-- <li class="aui-list-item iscroll_list"> -->
			                    <div id="co_orderGoods" class="aui-media-list-item-inner" style="overflow-x:auto;width: fit-content;-webkit-overflow-scrolling: touch;">
									<div class="aui-list-item-media showGoods" style="width: 4.3rem;height: 6rem;"  v-for="(item,index) in cartList" :key="index">
										
										<!--<img :src="goodsImg(item) || 'static/image/demo1.png'" style="height: 100%;"/>--> 
										<img v-lazy="item.goodsImg || goodsImg(item)  || 'static/image/demo2.png'" style="height: 74.5%;"/> 
										<!--<em style="background:#EF5423;opacity: 0.6;">x{{item.goodsType == 7?'1':item.goodsNum}}</em>-->
										<div style="width: 100%;overflow-x: hidden;" class="overHide">{{item.goodsname}}</div>
									</div>	<!---->
									
			                    </div>
			                <!-- </li> -->
			            </ul>
                	</div>
	              	<div class="zy" style="display: flex;flex: 1;height: 10rem;" v-if="!this.marks">
	              		<div class="sidebar fontColor">
                              <div style="padding-bottom: 0.5rem;">{{newdate}} {{deliveryDate}}</div>
                              <div style="background:#f5f5f5;min-height:50vh;max-height:60vh;width:100%;"></div>
                        </div>
	              		<div class="page-content" v-if="changeDeliveryList && changeDeliveryList.length">
	              			<!-- <ul> -->
	              				<!-- <li class="aui-list-item item-height"> -->
									<div class="aui-list-item-inner">
										<div class="aui-pull-left leftPop">
											<div class="aui-pull-left datePop">{{''}}</div>
										</div>
										<div class="aui-pull-left rightPop">
											<!--:class="{fontColorDark:true}"-->
											<!--不可选加上改样式 -->
											<!-- @click="showColor(index)"-->
											<div class="timePop" :class="{fontColorDark:item.valid == 0,fontColor:index == countChange}" v-for="(item,index) in changeDeliveryList" :key="index">
                                                <div  @click="showColor($event,index,item)">
                                                    {{item.startBookTm?item.startBookTm:''}} - {{item.endBookTm}} &nbsp; &nbsp;&nbsp;
                                                    <span>{{getShowMesssage(item)}} </span>
                                                    <!--v-if="!change"-->
                                                    <!--<span v-if="change">{{item.valid == 0?'已约满':''}}</span>-->
                                                    <input type="checkbox" 
                                                    :style="{backgroundColor:countChange === index?'#38b035':'#fff'}" 
                                                    ref="checkedPop" 
                                                    :class="{checkedBoxH:item.valid == 0}" 
                                                    :checked="countChange === index" class="aui-checkbox aui-pull-right" />
                                                </div>
											</div>
											<!--可选显示checkeBox-->
											</div>
										<div class="m-clear"></div>
									</div>
								<!-- </li> -->
	              			<!-- </ul> -->
	              		</div>
		           		<div v-if="!changeDeliveryList || !changeDeliveryList.length" style="margin-top:2rem;margin-bottom:2rem;width:100%;text-align:center;">
		           			<span style="margin-right: 4rem;position: relative;top:3rem;">暂无可配送时间</span>
							
		           		</div>
	              		
	              	</div>

	              	
	              	<!--<div class="timePop fontColor bigStyle" v-if="hasBigFlag">您所选择的大件商品配送时间为：明天 &nbsp;11:30-15:30</div>-->
	               <div class="cuponChoose aui-btn aui-btn-danger aui-btn-block aui-btn-sm"  v-if="clickNow === 0 && allFlag">
	                    <div id="close_coupon" style="font-size: 1rem;" @click.stop="changeParcel2">下一步</div>
	               </div>
	               <div class="cuponChoose aui-btn aui-btn-danger aui-btn-block aui-btn-sm"  v-if="(allFlag && clickNow == 1) || !allFlag">
	                    <div id="close_coupon" style="font-size: 1rem;" @click.stop="confirmPop">确 定</div>
	                </div>
	            </div>
				
				
				
				<!--<div id="purchase_service">
					<div class="spec_middle">

						<div class="value_added">
							<ul class="aui-list aui-media-list top_div aui-list-header" style="margin-bottom:0;">
								<div class="aui-list-item-inner headPop">
									<div class="aui-pull-left cancel clearB" @click="cancelPop">
										取 消
									</div>
									<div class="aui-pull-right clearB" @click="confirmPop">
										确 定
									</div>
								</div>
								<div class="aui-pull-left leftPop sidebar">
									<div class="aui-pull-left datePop">{{deliveryDate}}</div>
								</div>
								<li class="aui-list-item item-height">
									<div class="aui-list-item-inner">
										<div class="aui-pull-left leftPop">
											<div class="aui-pull-left datePop">{{''}}</div>
										</div>
										<div class="aui-pull-left rightPop">
											<!-:class="{fontColorDark:true}"-->
											<!--不可选加上改样式 -->
											<!-- @click="showColor(index)"-->
											<!-- <div class="timePop" :class="{fontColorDark:item.valid == 0,fontColor:index == count}" v-for="(item,index) in changeDeliveryList" :key="index">
												{{item.startBookTm?item.startBookTm:''}} - {{item.endBookTm}} &nbsp; &nbsp;&nbsp;
												<span v-if="!change">({{getShowMesssage(item)}} )</span>
												<span v-if="change">{{item.valid == 0?'已约满':''}}</span>
												<input type="checkbox" ref="checkedPop" :class="{checkedBoxH:item.valid == 0}" @click="showColor($event,index,item)" :checked="count === index" class="aui-checkbox aui-pull-right" />
											</div>
											<div class="timePop fontColor" v-if="hasBigFlag">大件商品明天配送</div>
											<!-可选显示checkeBox-->
										<!-- </div>
										<div class="m-clear"></div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>-->
			</popup>
		</div>

	</div>
</template>

<script>
	import { mapMutations, mapGetters } from 'vuex';
	import { Toast } from '../../../utils/toast';
	import { Popup } from 'mint-ui';
	export default {
		props: {
			//常规的配送时间
			data1: {
				type: Array,
				default: function() {
					let arr = [];
					return arr
				}
			},
			//大件的配送时间
			data2: {
				type: Array,
				default: function() {
					let arr = [];
					return arr
				}
			},
			idName: {
				type: String,
				default: function() {
					return ''
				}
			},
			flag: {
				type: Boolean,
				default: function() {
					return true
				}
			},
			hasBigFlag: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			change: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			marks: {
				type: Boolean,
				default: function() {
					return false
				}
			},
			money: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//常规商品数组
			checkedCartListNormal: {
				type: Array,
				default: function() {
					let arr = [];
					return arr
				}
			},
			checkedCartListBig: {
				type: Array,
				default: function() {
					let arr = [];
					return arr
				}
			}
		},
		components: {
			"popup": Popup,
		},
		computed: {
			...mapGetters('zx', [
				"getTimeNormal","getTimeBig","getTimeSaveObj","getBigM","getNormalM","getOrderFlag"
			]),
			nowDataC(){
				return this.nowData;
			},
			cartList(){
				return this.checkedCartList;
			},
			countChange(){
				return this.count;
			}
		},
		watch: {
			checkedCartListNormal(newVal, oldVal){
//				console.log(newVal,'常规商品的数据拿到了哦 ....................................')
				if(this.checkedCartListNormal.length > 0){
					this.checkedCartList = newVal;
				}
			},
			checkedCartListBig(newVal, oldVal){
//				console.log(newVal,'大件商品的数据拿到了哦 ....................................')
				if(this.checkedCartListBig.length > 0 && !this.checkedCartListBig.length){
					this.checkedCartList = newVal;
				}
			},
			data1(newVal, oldVal){
				if(newVal[0] && newVal[0].deliveryList && newVal[0].deliveryList[0]){
					this.newdate = this.getnewTime(newVal[0].deliveryList[0].startBookTm) 
				}
				console.log('77777777777777777777777777777777777777777777777777777777',newVal)
				if(!this.getDataCatchFlag){
					
					console.log('48484848484848嗯就是执行data1',newVal)
					if(this.data1.length > 0){
						this.nowData = newVal;
						this.clickNow = 0;
						console.log('48484848484848嗯就是执行data1',newVal)
					}
					
					var arr = newVal[0].deliveryList;
					for(let i = 0; i < arr.length; i++){
						if(arr[i].valid === 1){
							this.initCount(i,0)
							return
						}
					}
				}
				
			},
			data2(newVal, oldVal){
				console.log(newVal,'大件配送时间按')
				if(newVal[0] && newVal[0].deliveryList && newVal[0].deliveryList[0]){
					this.newdate = this.getnewTime(newVal[0].deliveryList[0].startBookTm) 
				}
				// 解决显示不出大件商品配送时间及商品问题 因为data2改变时 nodata并没有改变所以 只显示了一个包裹 强制改变 nowdata
				this.nowData = [];
				this.nowData = this.data1;
				// 解决显示不出大件商品配送时间及商品问题
				if(!this.getDataCatchFlag){
					
					if(this.data2.length > 0 && !this.data1.length){
						this.nowData = newVal;
						this.clickNow = 1;
						console.log('48484848484848嗯就是执行data2',newVal)
					}
					
					var arr = newVal[0].deliveryList;
					for(let i = 0; i < arr.length; i++){
						if(arr[i].valid === 1){
							this.initCount(i,1)
							return
						}
					}
				}
				
			},
			nowData(newVal, oldVal) {
				if(newVal[0].deliveryList[0]){
					this.newdate = this.getnewTime(newVal[0].deliveryList[0].startBookTm) 
				}
//				console.log(newVal,'页面数据发生变化9999999');
//				
				console.log(this.data1,this.data2,'888888888888885888888888888888888888888888888888888888888888888888888888888888888888888888888')
				if(this.data1.length > 0 && this.data2.length){
					this.allFlag = true;
				}
				
				if(this.checkedCartListBig.length > 0 && !this.checkedCartListBig.length){
					this.checkedCartList = this.checkedCartListBig;
				}
				
				if(newVal.length > 0 && !this.checkObj(newVal[0])) {
					this.deliveryDate = newVal[0].deliveryDate;  // 用于展示的配送日期
					
					this.getSendDate(); // 获取配送日期
				
					this.saveSendDate(); //存配送日期
					
					this.changeDeliveryList = []; //刚进来时this.changeDeliveryList存放了大件的配送时间  先清空
					
					this.deliveryList = newVal[0].deliveryList;
					console.log(this.deliveryList,'nowDate发生改变');
					
					for(let i = 0; i < this.deliveryList.length; i++) {
						var obj = {};
						if(this.deliveryList.length > 0) {
							obj.startBookTm = this.getTime(this.deliveryList[i].startBookTm);
							obj.endBookTm = this.getTime(this.deliveryList[i].endBookTm);
							obj.valid = this.deliveryList[i].valid;
							this.changeDeliveryList.push(obj);
						}
					}
//						console.log(this.changeDeliveryList,'nowDate发生改变这个')
					this.changeShowTime();
				}
				
			},
			// popupVisible(newData,oldData){
			// 	console.log(newData,'watch')
			// }
		},
		data() {
			return {
				popupVisible: false,
				flagColor: false,
				count: 0, //checkeBox的选中状态
				deliveryDate: '', //哪一天
				deliveryList: [], //父组件传过来的时间列表
				trueDeliveryList: [], //可用的时间列表   请求后台
				changeDeliveryList: [], // 格式化后的时间列表
				trueChangeDeliveryList: [], //可用时间列表展示
				showTime: '', //用于展示的时间
				getDataTime: {}, //用于下单的时间
				chooseFlag:false, // 用户是否点击过确认 点击过就为true 默认false
				showTitle:'',  // 按钮显示内容
				nowData:[],  // 当前展示的时间列表
				clickNow:0 , // 用户当前看到的Tab  0代表常规  1代表大件
				checkedCartList:[] , //商品列表 随tab切换
				allFlag:false , // 是否既有常规有有大件商品
				countNomal:0, //常规商品的选中序号
				countBig:0, //大件商品的选中序号
				showTimeNomal:'',//常规商品配送时段
				showTimeBig:'', // 大件商品配送时段
				deliveryDateNomal:'',//常规商品配送日期
				deliveryDateBig:'', //大件商品配送日期
				getDataCatchFlag:false, // 是否是从缓存获取数据
				dataNormal:[],  // 常规商品数组
				dataBig:[], //大件商品数组
				newdate:"",//配送的日期
			}
			
		},

		methods: {
            //判断对象是否为空的方法 为空返回true,否则返回false
            checkObj(obj) {
                for(var key in obj) {
                    return false;
                }
                return true;
            },
			//解决ios显示不了 的兼容问题
			appendZxGetTime() {
				if(document.querySelector(".chooseTime")) {
					setTimeout(() => {
						if(document.querySelector(".confirm-order-box")){
							document.querySelector(".confirm-order-box").appendChild(document.querySelector(".chooseTime"))
						}
					}, 300)
				}
			},
			...mapMutations('zx', [
				"setTimeNormal", "setTimeBig", "setNormalM", "setBigM","setDateNormal","setDateBig","setTimeSaveObj"
			]),
			//改变展示时间
			changeShowTime(){
				//如果是从缓存获取的数据就不执行
				if(!this.getDataCatchFlag){
					//初始化 展示时间
					if(this.deliveryList.length > 0) {

						for(let k = 0; k < this.changeDeliveryList.length; k++) {
							if(this.changeDeliveryList[k].valid == 1) {
								this.trueChangeDeliveryList.push(this.changeDeliveryList[k]);
							}
						}
						for(let j = 0; j < this.deliveryList.length; j++) {
							//							console.log(this.deliveryList[j],'[没打印]');
							if(this.deliveryList[j].valid == 1) {
								this.trueDeliveryList.push(this.deliveryList[j]);
							}
						}
						for(let i = 0; i < this.changeDeliveryList.length; i++) {
							if(this.changeDeliveryList[i].valid == 1) {
								//								console.log("进来展示")
//								this.count = i;
								this.showTime = this.changeDeliveryList[i].startBookTm + '-' + this.changeDeliveryList[i].endBookTm;
								if(this.clickNow === 0){
									this.showTimeNomal = this.showTime;
									console.log(this.showTimeNomal,'333333333');
								}else if(this.clickNow === 1){
									this.showTimeBig = this.showTime;
								}
								return
							}
						}
					}
				}
			},
			//初始化count 
			initCount(num,type){
				if(this.allFlag && type === 0){
					this.countNomal = num;
				}else if(this.allFlag && type === 1){
					this.countBig = num;
				}
				if(!this.allFlag){
					this.count = num;
				}
			},
			//获取用户选中的时间进行显示
			getShowTimeUser(){
				console.log(123456789987654321)
				console.log(this.getTime(this.getTimeNormal.startBookTm),'1111111111111111111111111111---------------------11111111111111111');
			},
			//当同时存在2个包裹时获取配送日期
			getSendDate(){
				if(this.allFlag && !this.checkObj(this.data1[0])){
					this.deliveryDateNomal = this.data1[0].deliveryDate//常规商品配送日期
					this.deliveryDateBig = this.data2[0].deliveryDate//大件商品配送日期
				}
			},
//			将日期存起来供购买商品详情页展示
			saveSendDate(){
				console.log('123456设置配送日期',this.deliveryDate)
				if(!this.allFlag){
					if(this.data1 && this.data1.length){
						this.setDateNormal(this.deliveryDate)
					}
					if(this.data2 && this.data2.length){
						this.setDateBig(this.deliveryDate);
					}
				}else{
					this.setDateNormal(this.deliveryDateNomal);
					this.setDateBig(this.deliveryDateBig);
				}
			},
			//清空数据操作
			clearDate(){
				this.deliveryList = []; //父组件传过来的时间列表
				this.trueDeliveryList = []; //可用的时间列表   请求后台
				this.changeDeliveryList = []; // 格式化后的时间列表
				this.trueChangeDeliveryList = [];//可用时间列表展示
			},
			//当又两个包裹时切换包裹
			changeParcel1(){
				if(this.clickNow === 1){
					this.clearDate();
					this.nowData = this.data1;
					console.log(this.data1,this.nowData);
					this.clickNow = 0;
					this.checkedCartList = this.checkedCartListNormal; //常规商品数据
					this.countBig = this.count;
					this.count = this.countNomal;
					console.log(this.count,'选中序号')
				}
			},
			changeParcel2(){
				if(this.clickNow === 0){
					this.clearDate();
					this.nowData = this.data2;
					this.clickNow = 1;
					this.countNomal = this.count;
	//				console.log(this.data2,this.nowData);
					this.checkedCartList = this.checkedCartListBig; //大件商品数据
					this.count = this.countBig;
					console.log(this.count,'选中序号')
				}
				
			},
			//初始化商品数据
			initGoodsDate(){
				console.log('初始化商品数据',this.checkedCartListNormal,this.checkedCartListBig)
				if(this.checkedCartListNormal.length > 0){
					this.checkedCartList = this.checkedCartListNormal;
				}
				if(this.checkedCartListBig.length > 0 && !this.checkedCartListNormal.length){
					this.checkedCartList = this.checkedCartListBig;
				} 
			},
			//展示商品图片
			goodsImg(goodsItemData) {
	            if (goodsItemData && goodsItemData.urllist) {
	                if(goodsItemData.urllist.length) {
	                	for(let i = 0 ; i < goodsItemData.urllist.length; i++){
	                		if(goodsItemData.urllist[i].Imgurltype == 1){
//	                			 || "static/image/demo1.png";
	                			return goodsItemData.urllist[i].imgurl
	                		}
	                	}
	                } 
//	                else {
//	                    return "static/image/demo1.png";
//	                }
	            } 
//	            else {
//	                return "static/image/demo1.png";
//	            }
	        },
//			按钮显示内容
			showTitleMsg(){
				if(this.idName === 'name1'){
					if(this.chooseFlag){
						return '更改'
					}else{
						return '选择配送时间'
					}
				}else{
					return '更改'
				}
			},
			getShowMesssage(item) {
				if(item.valid == 0) {
					return ' 已约满 ';
				}else{
					return '';
				}
//				else if(item.valid == 1 && !this.money) {
//					return '免运费';
//				} else {
//					return '运费：¥' + this.money;
//				}
			},
			showPop() {
				//console.log(this.data1)
                console.log(this.data1,this.data2,this.nowData,"666666666666666---------------------")
                //当获取到配送时间并且有可用时间时 才弹出选择配送时间选择框 否则就提示
				// if(this.nowData && this.nowData.length && this.getOrderFlag) {
				if(this.nowData && this.nowData.length) {
					this.popupVisible = true;
				} else {
					return
					// Toast({
					// 	message: '暂无可配送时间',
					// 	duration: 1000,
					// 	type: 'fail'
					// });
				}

			},
			cancelPop() {
				this.popupVisible = false;
			},
			confirmPop() {
				this.chooseFlag = true;  //标志用户是否点击确定
				this.popupVisible = false;
				this.saveAllTimeDate();  // 改变的时候存用户选取的信息
				//用于请求的时间
//				console.log(this.deliveryList[4], '***************')
//				for(let i = 0; i < this.deliveryList.length; i++) {
//					if(i === this.count && this.deliveryList[i].valid == 1) {
//						this.getDataTime = this.deliveryList[i];
//						if(this.idName === 'name1') {
//							//      					console.log('紧紧')
//							this.setTimeNormal(this.deliveryList[i]);
//						} else {
//							this.setTimeBig(this.deliveryList[i]);
//						}
//					}
//				}
			},
			showColor(event, index, item) {
				
				if(item.valid == 0) {
					Toast({
						message: '该时段配额已满',
						duration: 1000,
						type: 'fail'
					});
				}
				for(let i = 0; i < this.$refs.checkedPop.length; i++) {
					if(i == index) {
						event.target.checked = true;
						this.count = i;
						if(this.clickNow === 0){
							this.countNomal = i;
						}else if(this.clickNow === 1){
							this.countBig = i;
						}
					}
				}
				console.log(this.count,'count');
				
				for(let i = 0; i < this.deliveryList.length; i++) {
					if(i === this.count && this.deliveryList[i].valid == 1) {
						this.getDataTime = this.deliveryList[i];
						if(this.clickNow === 0) {
							this.setTimeNormal(this.deliveryList[i]);
						} else if(this.clickNow === 1){
							this.setTimeBig(this.deliveryList[i]);
						}
					}
				}
					//用于展示的时间
				for(let i = 0; i < this.changeDeliveryList.length; i++) {
					if(i === this.count && this.changeDeliveryList[i].valid == 1) {
						if(this.changeDeliveryList.length > 0) {
							this.showTime = this.changeDeliveryList[i].startBookTm + '-' + this.changeDeliveryList[i].endBookTm;
							if(this.clickNow === 0){
								this.showTimeNomal = this.showTime;
								console.log(this.showTimeNomal,'11111111111');
							}else if(this.clickNow === 1){
								this.showTimeBig = this.showTime;
							}
							
						}
					}
				}
				
				
			},
			//转换分钟时间格式
			getTime(param) {

				if(param) {
					let date = new Date(param);
					let year = date.getFullYear();
					let month = checkTime(date.getMonth() + 1);
					let day = checkTime(date.getDate());
					let hour = checkTime(date.getHours());
					let min = checkTime(date.getMinutes());
					let sec = checkTime(date.getSeconds());

					function checkTime(i) {
						if(i < 10) {
							i = '0' + i;
						}
						return i;
					}

					return hour + ':' + min;
				} else {
					return '';
				}
			},
			//转换天时间格式
			getnewTime(param) {

				if(param) {
					let date = new Date(param);
					let year = date.getFullYear();
					let month = checkTime(date.getMonth() + 1);
					let day = checkTime(date.getDate());
					let hour = checkTime(date.getHours());
					let min = checkTime(date.getMinutes());
					let sec = checkTime(date.getSeconds());

					function checkTime(i) {
						if(i < 10) {
							i = '0' + i;
						}
						return i;
					}

					return month + '月' + day +'日';
				} else {
					return '';
				}
			},
			//转换时间格式 显示用
			getTimeShow(param) {
				if(param) {
					let date = new Date(param);
					date.setSeconds(date.getSeconds() + 1);
					let year = date.getFullYear();
					let month = checkTime(date.getMonth() + 1);
					let day = checkTime(date.getDate());
					let hour = checkTime(date.getHours());
					let min = checkTime(date.getMinutes());
					let sec = checkTime(date.getSeconds());

					function checkTime(i) {
						if(i < 10) {
							i = '0' + i;
						}
						return i;
					}

					return hour + ':' + min;
				} else {
					return '';
				}
			},
			//判断对象是否为空的方法
			checkObj(obj) {
				for(var key in obj) {
					return false;
				}
				return true;
			},
			//存用户选择的配送时间信息
			saveAllTimeDate(){
				//判断用户用没有确认过选择的 配送时间，确认了就存起来
				if(this.chooseFlag){
					var obj = {};
					obj.count = this.count; //checkeBox的选中状态
					obj.deliveryDate = this.deliveryDate; //哪一天
					obj.deliveryList = this.deliveryList; //父组件传过来的时间列表
					obj.trueDeliveryList = this.trueDeliveryList; //可用的时间列表   请求后台
					obj.changeDeliveryList = this.changeDeliveryList; // 格式化后的时间列表
					obj.trueChangeDeliveryList = this.trueChangeDeliveryList; //可用时间列表展示
					obj.showTime = this.showTime; //用于展示的时间
					obj.getDataTime = this.getDataTime; //用于下单的时间
					obj.chooseFlag = this.chooseFlag; // 用户是否点击过确认 点击过就为true 默认false
					obj.showTitle = this.showTitle;// 按钮显示内容
					obj.nowData = this.nowData;
					obj.clickNow = this.clickNow; // 用户当前看到的Tab  0代表常规  1代表大件
					obj.checkedCartList = this.checkedCartList; //商品列表 随tab切换
					obj.allFlag = this.allFlag;  // 是否既有常规有有大件商品
					obj.countNomal = this.countNomal; //常规商品的选中序号
					obj.countBig = this.countBig; //大件商品的选中序号
					obj.showTimeNomal = this.showTimeNomal;//常规商品配送时段
					obj.showTimeBig = this.showTimeBig; // 大件商品配送时段
					obj.deliveryDateNomal = this.deliveryDateNomal;//常规商品配送日期
					obj.deliveryDateBig = this.deliveryDateBig; //大件商品配送日期
					//以下为父组件传过来的
					obj.data1 =	this.data1;
					//大件的配送时间
					obj.data2 =	this.data2;
					obj.flag =	this.flag;
					obj.hasBigFlag = this.hasBigFlag;
					obj.change =	this.change;
					obj.money = this.money;
					//常规商品数组
					obj.checkedCartListNormal =	this.checkedCartListNormal;
					obj.checkedCartListBig =	this.checkedCartListBig;
					this.setTimeSaveObj(obj);
				}
				
			},
//			取用户存的信息
			getUserAllDate(){
				
				var obj = this.getTimeSaveObj;
				let flag = this.checkObj(obj);
				this.getDataCatchFlag = !flag;  // 是否是从缓存获取数据
				console.log('取用户存的信息888888999999999999999************************************',obj,this.getDataCatchFlag);
				if(!flag){
//					console.log(1234655555)
					this.count = obj.count; //checkeBox的选中状态
					this.deliveryDate = obj.deliveryDate; //哪一天
					this.deliveryList = obj.deliveryList; //父组件传过来的时间列表
					this.trueDeliveryList = obj.trueDeliveryList; //可用的时间列表   请求后台
					this.changeDeliveryList = obj.changeDeliveryList; // 格式化后的时间列表
					this.trueChangeDeliveryList = obj.trueChangeDeliveryList; //可用时间列表展示
					this.showTime = obj.showTime; //用于展示的时间
					this.getDataTime = obj.getDataTime; //用于下单的时间
					this.chooseFlag = obj.chooseFlag; // 用户是否点击过确认 点击过就为true 默认false
					this.showTitle = obj.showTitle;// 按钮显示内容
					this.nowData = obj.nowData;
					this.clickNow = obj.clickNow; // 用户当前看到的Tab  0代表常规  1代表大件
					this.checkedCartList = obj.checkedCartList; //商品列表 随tab切换
					this.allFlag = obj.allFlag;  // 是否既有常规有有大件商品
					this.countNomal = obj.countNomal; //常规商品的选中序号
					this.countBig = obj.countBig; //大件商品的选中序号
					this.showTimeNomal = obj.showTimeNomal;//常规商品配送时段
					this.showTimeBig = obj.showTimeBig; // 大件商品配送时段
					this.deliveryDateNomal = obj.deliveryDateNomal;//常规商品配送日期
					this.deliveryDateBig = obj.deliveryDateBig; //大件商品配送日期
					console.log(this.showTimeNomal,'222222222');
				}
//				console.log(this.showTimeNomal,this.count,this.showTime,this.deliveryDate,this.showTitle);
			},
			//初始化nowDate
			initNowData(){
				console.log(this.getDataCatchFlag,'初始化nowDatenowDatenowDatenowDatenowDatenowDate')
				if(!this.getDataCatchFlag){
					var obj = this.getTimeSaveObj;
					this.data1 = obj.data1;
					this.data2 = obj.data2;
					console.log(this.data1,this.data2,'1初始化nowDatenowDatenowDatenowDatenowDatenowDate1')
					console.log('48484848484848嗯就是执行data1',newVal)
					if(this.data1.length > 0){
						this.nowData = newVal;
						this.clickNow = 0;
						console.log('48484848484848嗯就是执行data1',newVal)
					}
					
					var arr = newVal[0].deliveryList;
					for(let i = 0; i < arr.length; i++){
						if(arr[i].valid === 1){
							this.initCount(i,0)
							return
						}
					}
				
					
					if(this.data2.length > 0 && !this.data1.length){
						this.nowData = newVal;
						this.clickNow = 1;
						console.log('48484848484848嗯就是执行data2',newVal)
					}
					
					var arr = newVal[0].deliveryList;
					for(let i = 0; i < arr.length; i++){
						if(arr[i].valid === 1){
							this.initCount(i,1)
							return
						}
					}
				}
			},
			//阻止浏览器默认行为触发的通用方法  
			stopDefault(e){  
				
				//防止浏览器默认行为(W3C)  
				if(e && e.preventDefault){  
					console.log("789-------------------------")  
					e.preventDefault();  
				}  
				//IE中组织浏览器行为  
				else{  
					console.log("456------------------")  
					window.event.returnValue=false; //实际上在IE8以下，会报错
					return false; 
				}
				console.log("123----------------------")  
				// document.querySelector(".content").
			}
			
		},
		created() {
			this.initGoodsDate();
			this.getUserAllDate();
			console.log(this.data1,this.data2,'mount獲取數據獲取數據')
//			console.log(this.checkObj({}),'判断对象是否是空对像');
		},
		mounted() {
			this.appendZxGetTime();
			console.log('mounted执行执行执行')
		},
		beforeDestroy() {
			
		},
	}
</script>

<style scoped="scoped">
    /* 新加的样式 */
    .noTime {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height:2.2rem;
        position:relative;
    }
    .noTimeLeft {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .chooseTimeBoxJiantou{
        width: .4rem;
        height: .4rem;
        position: absolute;
        top: 50%;
        right: 0.2rem;
        margin-top: -.2rem;
        background: 0 0;
        border: 1px solid #ddd;
        border-top: none;
        border-right: none;
        z-index: 2;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    .packageTime {
        padding-left: 1.2rem;
        padding-bottom: 0.5rem;
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    /* 以前的样式 */
	.spec_middle {
		padding-left: 0rem;
		/*width: 100%;
		position: absolute;
		bottom: 3rem;
		z-index: 10;*/
	}
	
	.settle_accounts {
		height: 3rem;
		background: rgba(255, 255, 255, 0.9);
		overflow: hidden;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: -1px;
		display: table;
		border-top: 1px solid #eaeaea;
		z-index: 1;
	}
	.sidebar {
	   	overflow-y:hidden;
	   	order:-1;
	   	flex:0 0 32%;
	   	padding-top: 0.5rem;
	    /*width: 20%;*/
	    /*border-right: 1px solid #E7E7E7;*/
	}
	.m_close_page {
    	/*font-size: 2px;*/
    	font-weight: normal;
	}
	.page-content {
	   overflow-y: auto;
	   width: 70%;
	   text-align: left;
	   padding-left: 0.5rem;
	   -webkit-overflow-scrolling: touch;
	}
	.bigStyle {
		border: 1px solid #ffde8f;
		background: #fff7d7;
		border-radius: 0.2rem;
		width: 80%;
	}
	.scroller_list {
		overflow-y: auto;
	}
	
	.iscroll_list {
		height: 5.5rem !important;
	}
	
	.scroller_list {
		position: relative;
	}
	
	.fontColor {
		/* color: #EF5423; */
        color:#ef5423;
	}
	
	.fontColorDark {
		color: #B6B6B6;
	}
	
	.value_added {
		padding: 0.75rem 0 3.5rem;
		max-height: 70vh;
		overflow-y: scroll;
		padding-top: 0;
	}
	
	.headPop {
		background-color: #FFF2F2;
		color: #E51C23;
	}
	
	.leftPop {
		width: 20%;
		text-align: left;
		overflow: hidden;
		/*position: absolute;*/
		top: 1rem;
		left: 1rem;
	}
	
	.rightPop {
		width: 100%;
		text-align: left;
        /* padding-bottom: 3rem; */
		/* border-left: solid 1px #F3F3F3; */
	}
	
	.datePop {
		width: 100%;
		text-align: center;
		color: #E51C23;
	}
	.timePop {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		min-height: 2.2rem;
		padding-top: 0.5rem;
		width: 100%;
        border-bottom: 1px solid #e8e8e8;
	}
	
	.cancel {
		padding-left: 0.75rem;
	}
	
	.m-clear {
		clear: both;
	}
	
	.value_added {
		overflow-y: scroll;
		padding: 0px 0px 3.5rem;
		padding: 0;
	}
	
	.item-height {
		max-height: 60vh;
		/* overflow: scroll; */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.checkedBoxH {
		height: 0;
		width: 0;
	}
	.cuponChoose{
		height: 2.5rem;
	    background: rgba(255, 255, 255, 0.9);
	    width: 100%;
	    border-top: 1px solid #eaeaea;
	    padding: 0.25rem 0.75rem 0;
	    margin-bottom: 0rem;
	    border-radius: 0px;
	}
	.parcel {
		width: 50%;
		text-align: center;
		height: 1.8rem;
		line-height: 1.8rem;
	}
	.parcelOpen {
		/* color: #EF5423; */
		color: #ef5423;
        
	}
	.parcelClose{
		background: #F4F4F4;
	}
	.showGoods {
		display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	    height: 6rem;
	}
	.overHide {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.timeHeadTitle{
		height: 2rem;
	    position: relative;
	    line-height: 2.25rem;
	    text-align: center;
	    border-bottom: 1px solid #eaeaea;
	}
	.parcelName {
		border-top:1px solid #EAEAEA;
		min-height: 2.5rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.parcelName p{
		color: #444;
	}
	.go-back i, .close_page i {
	    display: block;
	    height: 1.2px;
	    width: 1.2rem;
	    margin: 6px 0;
	    opacity:0.8;
	    transition: transform 0.2s ease-out;
	    background-color: #444;
	}
	.go-back i, .close_page i:nth-child(2) {
	    opacity:0;
	}
	.go-back, .close_page {
	    padding: 0.4rem 0.6rem;
	    cursor: pointer;
	    margin-left: 0.4rem;
	    margin-top: -2px;
	    position: absolute;
	    top: 0.08rem;
	    left: 85%;
	    will-change: transform;
	    transition: transform 0.2s ease-out 0.1s;
	}
	.changeColorGray{
		background-color: #EAEAEA;
		border: 0;
	}
	.aui-label-outlined.aui-label-danger, .aui-label-outlined.aui-label-danger:after {
	    color: #e51c23;
	    border-color: #e51c23;
	    padding: 0.2rem;
	    border-radius: 0.4rem;
	}
</style>